<template>
    <div style="margin-top:25px;margin-left: 15px;margin-right: 15px;">
        <div>
            <el-form :inline="true" :model="artForm" class="demo-form-inline">
                <el-form-item label="标题">
                    <el-input v-model="artForm.title" placeholder="文章标题"></el-input>
                </el-form-item>
                <el-form-item label="文章分类">
                    <el-select v-model="artForm.category" placeholder="文章分类"
                    >
                    <el-option v-for="(item,index) in categories" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.native="doSave">保存</el-button>
                </el-form-item>
            </el-form>
            <el-row>
                <el-col :span="8">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in provinces"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in cities"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                        v-for="item in areas"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
        </div>

        <div class="components-container">
        <div>
            <div style="display:inline-block;width: 100%;"  >
                <tinymce v-model="content" :height="400" />
            </div>
            <!-- <div class="editor-content" style="display:inline-block;width: 50%;vertical-align: top;margin-top: 103px;" v-html="content" /> -->
        </div>
        
        </div>
    </div>
  </template>
  
  <script>
  import Tinymce from '@/components/Tinymce'
  import  { getArtCategory, editArticle } from '@/api/art'
  import { getareas } from '@/api/area'
  
  export default {
    name: 'ArtEdit',
    components: { Tinymce },
    data() {
      return {
        provinces: [],
        cities: [],
        areas:[],

        province:'',
        city:'',
        area:'',

        categories:[],
        artForm:{
            title:'',
            category:''
        },
        content:
        `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;">
            <img title="TinyMCE Logo" src="https://www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
          <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
        </ul>`
      }
    },
    created(){
        console.log('======');
        // getArtCategory().then(res=>{
        //     console.log("获取文章分类---");
        //     console.log(res);
        //     this.categories =  res.data
        // }),
        getareas({pid:0}).then(res=>{
                console.log(res);
        })
    },
    methods:{
        getProvince(){
            getareas({pid:0}).then(res=>{
                console.log(res);
            }) 
        },
        getCities(){
            getareas({pid:this.province}).then(res=>{
                console.log(res);
            })
        },
        getAreas(){
            getareas({pid:this.city}).then(res=>{
                console.log(res);
            })
        },
        doSave(){
            console.log(this.content)
            let content = this.content
            let data = {
                content,
                title: this.artForm.title
                
            }
            editArticle(data).then( res=>{
                /* 如果保存成功，则执行 */
                this.$message({
                    message: res.message,
                    type: 'success'
                })
            })
        }
    }
  }
  </script>
  
  <style scoped>
  .editor-content{
    margin-top: 20px;
  }
  </style>
  
  